<template>
	<view>
		<image class="upper" src="https://img.wilmer.com.cn/admin/2024/3-13/WechatIMG266.jpg" mode=""></image>
		<view class="recommend">
			<image class="iconImg" src="https://img.wilmer.com.cn/admin/2024/3-13/6261f698c530c5189a0f30d6c0cfeed9.png"
				mode=""></image>
			<text class="version">推荐记录</text>
			<image class="more" src="../../static/homePage/more.jpg" mode=""></image>
		</view>
		<view class="option">
			<view class="option_box" v-for="(item,index) in list" :key='index' :class="{'special' : currindex== index}"
				@click="onclick(item,index)">
				<view class="money">¥<text>{{item.name}}</text></view>
				<view class="substance">{{item.content}}</view>
				<image class="Popular" v-if="item.recommend"
					src="https://img.wilmer.com.cn/admin/2024/3-14/44abd359812e45e96090e6e3f3c2961f.png" mode="">
				</image>
				<view class="give">{{item.content1}}</view>
				<view class="give" v-if="item.name == '399'">{{item.content2}}</view>
			</view>
		</view>
		<view class="btn conter" @click="GoPay()">去支付</view>
	</view>
</template>

<script>
	import {
		GetPayAi,
		countries,
		report29,
		report399,
		report99
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				list: [{
					name: "29.9",
					content: "留学报告",
					content1: '人工客服',
					recommend: false
				}, {
					name: "399",
					content: "至臻留学报告",
					content1: '留学相关视频',
					content2: 'VIP人工客服',
					recommend: true
				}, {
					name: "99.9",
					content: "详细留学报告",
					content1: '人工客服',
					recommend: false
				}],
				currindex: 1,
				payForm: {}, // 支付参数

				report: {} // AI报告
			}
		},
		onLoad(option) {
			this.report.country = option.country
			this.report.degree = option.degree
			this.report.major = option.major
			this.report.use_time = option.use_time
			this.report.avg = option.avg
			this.report.tf = option.tf
			this.report.ys = option.ys
			countries().then(res => {
				for (let i = 0; i < res.data.rows.length; i++) {
					let item = res.data.rows[i]
					if (item.countryName == this.report.country) {
						this.report.countryId = item.countryId
					}
				}
			})
		},
		methods: {
			onclick(item, index) {
				this.currindex = index
			},
			GoPay() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				uni.login({
					"provider": "weixin",
					success: (res) => {
						setTimeout(() => {
							uni.hideLoading();
						}, 500)
						this.payForm.code = res.code
						this.payForm.prise = 1

						GetPayAi(this.payForm).then(res => {
							// 参考示例。
							let sign = JSON.parse(res.data.data);

							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: sign.timeStamp,
								nonceStr: sign.nonceStr,
								package: sign.package,
								signType: sign.signType,
								paySign: sign.paySign,
								success: function(res) { // 支付成功的回调
									// console.log('success:' + JSON.stringify(res));
									uni.navigateTo({
										url: `/pages/knowledge/educational?report=${JSON.stringify(that.report)}&currindex=${that.currindex}`
									})
								},
								fail: function(err) { // 用户取消支付的回调
									// console.log('fail:' + JSON.stringify(err));
									uni.showToast({
										title: '你已取消支付',
										icon: 'none'
									})
								}
							});

						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upper {
		width: 100vw;
		height: 448rpx;
	}

	.recommend {
		margin-top: 36rpx;
		display: flex;
		align-items: center;

		.iconImg {
			width: 48rpx;
			height: 52rpx;
			margin-right: 10rpx;
		}

		.version {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 400;
			letter-spacing: 0.03em;
			line-height: 1;
			margin-bottom: 12rpx;
			color: #3775FF;
		}

		.more {
			width: 18rpx;
			height: 18rpx;
			margin-left: 4rpx;
			margin-bottom: 10rpx;
		}
	}

	.option {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.option_box {
			padding-top: 32rpx;
			width: 220rpx;
			height: 228rpx;
			border-radius: 16rpx;
			border: 1px solid #007AFF;
			color: #007AFF;
			position: relative;

			.hot {
				width: 58rpx;
				height: 58rpx;
				position: absolute;
				top: -4rpx;
				left: -4rpx;
			}

			.money {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;

				text {
					font-family: PingFang SC;
					font-size: 48rpx;
					font-weight: 500;
					letter-spacing: 0.03em;
				}
			}

			.substance {
				margin-top: 20rpx;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}

			.Popular {
				width: 56rpx;
				height: 56rpx;
				position: absolute;
				left: 4rpx;
				top: 4rpx;
			}

			.give {
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}
		}

		.special {
			background: #007AFF;
			border: 1px solid #007AFF;
			color: #FFFFFF;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #5E95FA;
		font-family: PingFang SC;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.03em;
		color: #fff;
		margin: 60rpx auto 0;
	}
</style>